<template>
    <div class="overview-container">
        <h2 class="page-title">系统概览</h2>
        <div class="overview">
            <div class="box">
                <div class="inner">
                    <h3>设备总数</h3>
                    <p>
                        <count-to
                            :startVal="0"
                            :endVal="overview.number"
                            :duration="1500"
                        >
                        </count-to>
                    </p>
                </div>
            </div>
            <div class="box">
                <div class="inner">
                    <h3>设备总金额</h3>
                    <p>
                        <count-to
                            :startVal="0"
                            :endVal="overview.amount"
                            :duration="1500"
                        >
                        </count-to>
                    </p>
                </div>
            </div>
        </div>
        <div class="chart-list clear-fix">
            <chart-box ref="status" />
            <chart-box ref="category" />
        </div>
    </div>
</template>

<script>
import CountTo from "vue-count-to";
import ChartBox from "@/components/ChartBox.vue";
export default {
    components: { CountTo, ChartBox },
    data() {
        return {
            overview: {
                //定义个对象
                amount: 0,
                number: 0
            },
            timeId: null
        };
    },
    created() {
        this.getOverview();
    },
    mounted() {
        this.getChartData();
        window.addEventListener('resize',this.resize);
    },
    beforeDestroy(){
        window.removeEventListener('resize',this.resize);
    },
    methods: {
        getOverview() {
            this.axios.get("/overview").then(data => {
                if (!data.code) {
                    this.overview = data.data;
                }
            });
        },
        getChartData() {
            this.axios.get("/status-overview").then(data => {
                if (!data.code) {
                    this.drawStatus(data.data);
                }
            });
            this.axios.get("/category-overview").then(data=>{
                if(!data.code){
                    this.drawCategory(data.data)
                }
            });
        },
        drawStatus(data) {
            const config = {
                color: ["#c23431", "#2f4554", "#61a0a8", "#d48265"],
                title: {
                    text: "设备状态汇总",
                    left: "center",
                    top: 20,
                    textStyle: {
                        fontWeight: "bolder",
                        color: "#666"
                    }
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: data.label.map((name, index) => ({
                            value: data.value[index],
                            name
                        })),
                        label: {
                            formatter: "{b}:{c}"
                        }
                    }
                ]
            };
            this.$refs.status.draw(config);
        },
        drawCategory(data) {
            const config = {
                title: {
                    text: "设备分类汇总",
                    left: "center",
                    top: 20,
                    textStyle: {
                        fontWeight: "bolder",
                        color: "#666",
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.label,
                    axisLabel: { interval: 0, rotate: 30 },
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        data: data.value,
                        type: "bar",
                        color: '#a90000'
                    }
                ]
            };
            this.$refs.category.draw(config)
        },
        resize(){
            //防抖
            if(this.timeId){
                clearTimeout(this.timeId)
            }
            this.timeId = setTimeout(()=>{
                this.$refs.status.resize();
                this.$refs.category.resize();
            },200);

        }
    }
};
</script>

<style lang="sass" scoped>
.overview-container
    padding: 0 30px
    .box
        display: inline-block
        height: 100px
        border-radius: 8px
        padding: 0 30px 0 90px
        background-repeat: no-repeat
        background-position: 30px center
        background-size: 30px
        &:first-child
            background-color: rgba(171, 125, 246, .2)
            background-image: url(~@/assets/img/icon1.png)
            margin-right: 30px
            color: #ab7df6
        &:last-child
            background-color: rgba(129, 201, 38, .2)
            background-image: url(~@/assets/img/icon2.png)
            color: #81c926
        h3,p
            white-space: nowrap
            text-align: center
        h3
            padding-top: 20px
            line-height: 1.2em
            font-size: 16px
        p
            font-size: 36px
            font-weight: 700
    .chart-list
        margin-top: 36px
        .chart-box
            float: left
            height: 420px
            &:first-child
                width: 35%
                margin-right: 3%
            &:last-child
                width: 55%
</style>
